<template>
  <div>
    <ul class="movie-list" v-if="dataList">
      <li
        class="movie-item"
        v-for="item in dataList"
        :key="item.filmId"
        @click="toDetial(item.filmId)"
      >
        <img class="poster" :src="item.poster" alt="" />
        <div class="info">
          <div class="namehez">
            <span class="name">{{ item.name }}</span>
            <span class="names">{{ item.item.name }}</span>
          </div>
          <span class="pfen">观众评分：{{ item.grade }}</span>
          <div class="actors">
            <span>主演：{{ item.actors | actorsFilter }}</span>
          </div>
          <p class="pfen">{{ item.nation }} | {{ item.runtime }}分钟</p>
        </div>
        <!-- <van-button class="buy" plain type="info" size="small">购票</van-button> -->
        <div class="buybox">
          <button class="buy">购票</button>
        </div>
      </li>
    </ul>
    <van-loading
      v-show="isLoadingShow"
      type="spinner"
      color="#f00"
      size="36px"
      vertical
    >
      数据加载中...
    </van-loading>
    <p class="bottom-mes" v-show="bottomMes">已到底</p>
  </div>
</template>

<script>
import { getNowPlayingAPI } from "@/network/api";
import Vue from "vue";
import { Loading, Button } from "vant";
Vue.use(Loading);
Vue.use(Button);

export default {
  data() {
    return {
      dataList: [],
      page: 1,
      total: 0,
      isLoadingShow: true,
      bottomMes: false,
    };
  },
  filters: {
    actorsFilter(data) {
      return data && data.map((val) => val.name).join(" ");
    },
  },
  methods: {
    toDetial(id) {
      this.$router.push("/detail/" + id);
    },
    // 下拉数据更新方法（父组件下拉调用此方法）
    scrollEndGetMore() {
      this.page++; // 页码每次+1，axios根据page请求数据
      if (this.dataList.length !== this.total) {
        getNowPlayingAPI({
          cityId: 110100,
          pageNum: this.page,
          pageSize: 10,
          type: 1,
          k: 227100,
        }).then((res) => {
          console.log(res);
          // 把请求到的新数据插入到原来的数组里面
          this.dataList = [...this.dataList, ...res.data.data.films];
          if (this.dataList.length == this.total) {
            this.isLoadingShow = false;
            this.bottomMes = true;
          }
        });
      }
    },
  },
  mounted() {
    getNowPlayingAPI({
      cityId: 110100,
      pageNum: 1,
      pageSize: 10,
      type: 1,
      k: 227100,
    }).then((res) => {
      this.dataList = res.data.data.films;
      this.total = res.data.data.total;
      console.log("NowPlaying默认第一页请求成功", this.dataList);
    });
  },
};
</script>

<style scoped  lang="less" >
.movie-item {
  padding: 15px;
  display: flex;
  background-color: #fff;
  color: #797d82;
  border-bottom: 1px solid #f1e9e9;
  .poster {
    width: 66px;
    height: 92.52px;
  }
  .info {
    padding: 10px;
    width: 180px;
    font-size: 16px;
    .namehez {
      margin-top: -5px;
      .name {
        max-width: calc(100% - 25px);
        color: #191a1b;
        font-size: 16px;
        height: 22px;
        line-height: 22px;
        margin-right: 5px;
        overflow: hidden;
        white-space: nowrap;
      }
      .names {
        font-size: 9px;
        color: #fff;
        background-color: #d2d6dc;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        border-radius: 2px;
      }
    }

    .pfen {
      font-size: 13px;
      margin-top: 4px;
      color: #797d82;
    }
    .actors {
      width: 225px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
  }
  .buybox {
    position: relative;
    left: 30px;
    top: -15px;
    .buy {
      width: 50px;
      height: 25px;
      margin-top: 50px;
      border: 1px solid #ff5f16;
      border-radius: 4px;
      background-color: #ffffff;
      color: #ff5f16;
    }
  }
}
.bottom-mes {
  text-align: center;
  height: 26px;
  line-height: 14px;
  background-color: #eee;
}
</style>